<%--
  Created by IntelliJ IDEA.
  User: Lemon
  Date: 2020/6/11
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"  media="all">
</head>
<body>
<div class="layui-container">
    <form class="layui-form" style="margin-top:30px;">
        <div class="layui-form-item" style="text-align:center;">
            <div class="layui-inline" style="margin-left: -30px;">
                <label class="layui-form-label">分类：</label>
                <div class="layui-input-inline" style="width:110px;">
                    <select>
                        <option value="status" selected>服务状态</option>
                        <option value="type" >服务类别</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 30px;">近</label>
                <div class="layui-input-inline" style="width:80px;">
                    <select>
                        <option value="7" selected>7天</option>
                        <option value="30" >30天</option>
                        <option value="90" >90天</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary" type="button">确定</button>
            </div>
        </div>
    </form>
    <div id="serviceStatistics" style="width:100%;height:600px">
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element','jquery','layer','form','laydate','layedit'], function() {
        var $ = layui.jquery
            ,element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('serviceStatistics'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '7天内服务状态统计情况',
            subtext: '数据来源：admin的客户服务数据'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
        },
        toolbox:{  //工具栏
            show: true,
            feature:{
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},  //图形切换
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            data: ["处理中","已处理","已归档","未处理"],
            axisTick: {
                show: false
            },

        },
        yAxis: {
            max : 10,
            min : 0,
            splitNumber : 5,
        },
        series: [{
            type: 'bar',
            data: [1, 2, 1, 4],
            minInterval: 5,
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>